@use '@/styles/gobal.scss' as *;

.lineChart {
    background: #fff;
    padding: $spacing-md;
    border-radius: $border-radius-lg;
    box-shadow: $box-shadow;
    height: pxToRem(300);
    transition: transform $transition-duration;

    &:hover {
        transform: translateY(pxToRem(-4));
        box-shadow: $box-shadow-hover;
    }
}

.chartContainer {
    position: relative;
    background: #fff;
    border-radius: pxToRem(8);
    padding: pxToRem(16);
    box-shadow: 0 pxToRem(2) pxToRem(8) rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    width: calc(100vw - pxToRem(48));
    // height: calc(100vh - pxToRem(200));
    height: pxToRem(600);
    max-width: pxToRem(1200);
    margin: 0 auto;

    &:hover {
        box-shadow: 0 pxToRem(4) pxToRem(12) rgba(0, 0, 0, 0.15);
        transform: translateY(pxToRem(-2));
    }

    @media screen and (max-height: 768px) {
        height: calc(100vh - pxToRem(160));
    }

    @media screen and (min-height: 1080px) {
        max-height: pxToRem(800);
    }
}